<template>
    <div class="page" :style="$store.state.isApp?'paddingTop:0':'paddingTop:1.2rem'">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp" :titleRight="titleRight" @preserve="preserve"></gltitle>
        <div class="tabs">
            <div class="tabs-item" :class="{select: tabsType==='A'}" @click="changeTabs('A')">
                <p>充值</p>
            </div>
            <div class="tabs-item" :class="{select: tabsType==='B'}" @click="changeTabs('B')">
                <p>取款</p>
            </div>
        </div>
        <balance-recharge></balance-recharge>
    </div>
</template>

<script>
import balanceRecharge from "@/components/balanceRecharge"
export default {
    components: {
        balanceRecharge
    },
    data() {
        return{
            is_mt: true,
            titleSize: '余额充值',
            titleRight: `<span style="font-size: .28rem;">交易记录</span>`,
            tabsType: "A"
        }
    },
    methods: {
        preserve() {
            console.log('交易记录')
        },
        changeTabs(type) {
            this.tabsType = type
            if (type == 'A') {
                this.titleSize = "余额充值"
            } else {
                this.titleSize = "提现余额"
            }
        }
    }
}
</script>

<style lang="less" scoped>
.page{
    display: flex;
    flex-direction: column;
    align-items: center;
    .tabs{
        width: 6.6rem;
        height: .7rem;
        background-color: #FFFFFF;
        border-radius: .35rem;
        display: flex;
        align-items: center;
        &-item{
            width: 3.3rem;
            height: .7rem;
            border-radius: .35rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #424B6C;
        }
        .select{
            color: #ffffff;
            background-color: #713FF5;
        }
    }
}
</style>